<template>
  <div class="myStoreWrap">
    <!-- 头部提示 -->
    <div class="StoreHeader">
      <i class="el-icon-warning" style="color: #00a3d2; font-size: 18px; margin-right: 5px;"></i>
      您填写的信息将在店铺前台展示给买家，请认真填写！
    </div>
    <!-- 中心内容 -->
    <div class="StoreContent">
      <!--中心内容左侧-->
      <div class="StoreContentLeft">
        <p class="StoreContentLeftA"><span>*</span>店铺名称</p>
        <p class="StoreContentLeftB">店铺标志</p>
        <p class="StoreContentLeftC"><span>*</span>经营地址</p>
        <p class="StoreContentLeftD"><span>*</span>店铺分类</p>
      </div>
      <!--中心内容右侧-->
      <div class="StoreContentRight">
        <!--右侧第一块,店铺名称-->
        <div class="StoreContentRightA">
          <input type="text">
        </div>
        <!--右侧第二块,店铺标志-->
        <div class="StoreContentRightB">
          <div class="RightTwoUploadDiv">
            <!--上传图片原生-->
            <input type="file" id="file" class="filepath" @change="changepic($event)" accept="image/jpg,image/jpeg,image/png,image/PNG">
            <img class="filepathImg" v-if="imageUrl" :src="imageUrl" alt="">
          </div>
          <p class="RightTwoUploadP"><span class="RightTwoUploadPto">上传标志</span> <i class="el-icon-warning" style="color: #00a3d2; font-size: 18px; margin-right: 5px;"></i>
            文件格式JPG、JPEG、PNG文件大小80K以内，建议尺寸80PX*80PX</p>
        </div>
        <!--右侧第三块,经营地址-->
        <div class="StoreContentRightC">
          <!--省市县三级联动-->
          <div class="SelectAddress">
            <v-distpicker @selected="onSelected"></v-distpicker>
          </div>
          <p class="StoreContentRightCTxt"><i class="el-icon-warning" style="color: #00a3d2; font-size: 18px; margin-right: 5px;"></i>目前不支持设置海外国家、地区、港澳台地区的地址，建议您填写国内地址！</p>
          <!-- 详细地址 -->
          <input class="address" type="text">
        </div>
        <!--右侧第四块,店铺分类-->
        <div class="StoreContentRightD">
          <div>
            <el-select v-if="getData.length==0" v-model="StoreKind" placeholder="请选择">
              <el-option v-for="item in StoreKinds" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
            <div v-if="getData.length>0">
              显示
            </div>
          </div>
        </div>

        <div class="myStoreInfoSave noselect">保存</div>
      </div>
    </div>
  </div>
</template>

<script>
  // 引入省市县三级联动插件
  import VDistpicker from 'v-distpicker'
  import axios from "axios"
  export default {
    name: "myStoreInfo",
    components: {
      VDistpicker
    },
    data() {
      return {
        // 请求数据
        getData: [],
        //上传店铺标志的图片
        file: '',
        // 上传店铺标志的图片地址
        imageUrl: '',
        // 地址选择
        select: {
          province: '',
          city: '',
          area: ''
        },
        // 店铺分类
        StoreKinds: ['黄金糕', '双皮奶', '蚵仔煎', '龙须面', '北京烤鸭'],
        // 店铺类型
        StoreKind: ''
      }
    },
    methods: {
      // 选择图片
      changepic(el) {
        var that = this;
        var reads = new FileReader();
        var file = el.target.files[0];
        that.file = file;
        reads.readAsDataURL(file);
        reads.onload = function(e) {
          that.imageUrl = e.target.result;
        };
      },
      //当三级都选择完触发onSelected
      onSelected(data) {
        console.log(data)
        // data数据如下
        // area: {code: "320211", value: "滨湖区"}
        // city: {code: "320200", value: "无锡市"}
        // province: {code: "320000", value: "江苏省"}

        this.select.province = data.province
      },
    },
    mounted() {
      var data = {
        // "comment":this.commentBack,
        // "commentParentId":this.dataListInfo.info[this.writeName].commentId,
        // "productId":this.dataList[this.puductId].id,
        // "productName":this.dataList[this.puductId].name,
        // "timestamp": Date.parse(new Date())
      }
      // axios.post("admin/store/getStoredetails", data).then(res => {
      //   if (res.status == "000000") {
      //     console.log(res.data);
      //     this.getData.push(res.data);
      //     console.log(this.getData.length);
      //   } else {
      //     this.$message.closeAll();
      //     this.$message(res.message);
      //   }
      //   // 关闭加载框
      // }).catch(error => {
      //   // 关闭加载框
      //   console.log(error);
      // });
    }
  }
</script>

<style scoped>
  /* 头部提示 */
  .StoreHeader {
    width: 1015px;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    text-indent: 10px;
    font-family: "PingFang-SC-Regular";
    font-weight: 600;
    color: #333333;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    margin-bottom: 20px;
  }

  /* 中心内容 */
  .StoreContent {
    width: 1015px;
    height: 937px;
    background: #FFFFFF;
  }

  /* 中心内容左侧 */
  .StoreContentLeft {
    width: 110px;
    float: left;
    text-align: right;
    overflow: hidden;
  }

  .StoreContentLeft p {
    font-size: 14px;
    font-family: "PingFang-SC-Regular";
    font-weight: 500;
    color: #333333;
  }

  .StoreContentLeft p span {
    font-size: 14px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: #E7261B;
  }

  .StoreContentLeftA {
    margin-top: 60px;
  }

  .StoreContentLeftB {
    margin-top: 50px;
  }

  .StoreContentLeftC {
    margin-top: 250px;
  }

  .StoreContentLeftD {
    margin-top: 140px;
  }



  /* 中心内容右侧 */
  .StoreContentRight {
    width: 800px;
    float: left;
    margin-left: 15px;
  }

  .StoreContentRightA {
    height: 120px;
    /* background: orange; */
  }

  .StoreContentRightB {
    height: 270px;
    /* background: blue; */
  }

  .StoreContentRightC {
    height: 160px;
    /* background: orange; */
  }

  .StoreContentRightD {
    height: 80px;
    line-height: 40px;
    /* background: red; */
  }

  /* 第一块 */
  .StoreContentRightA input {
    width: 220px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-family: "PingFang-SC-Regular";
    font-weight: 600;
    color: #333333;
    text-indent: 10px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    margin-top: 52px;
  }

  /* 第二块 */
  .RightTwoUploadDiv {
    width: 120px;
    height: 120px;
    border: 1px solid #E0E0E0;
  }

  .RightTwoUploadP {
    margin-top: 10px;
    font-size: 12px;
    line-height: 30px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: #666666;
  }

  .RightTwoUploadPto {
    display: inline-block;
    width: 110px;
    height: 30px;
    text-align: center;
    color: #333333;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 15px;
  }

  /* 上传图片 */
  .RightTwoUploadDiv {
    position: relative;
  }

  .filepath {
    position: absolute;
    z-index: 20;
    width: 120px;
    height: 120px;
    opacity: 0;
  }

  .filepathImg {
    position: absolute;
    z-index: 10;
    top: 0;
    width: 120px;
    height: 120px;
    background: orange;
  }

  .StoreContentRightCTxt {
    margin-top: 10px;
  }

  .address {
    width: 600px;
    height: 30px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    margin-top: 10px;
    text-indent: 10px;
  }

  .myStoreInfoSave {
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: #333333;
    background: #F5F5F5;
    border-radius: 5px;
    margin-left: 350px;
    cursor: pointer;
  }

  .myStoreInfoSave:hover {
    box-shadow: 0px 4px 7px 0px #cccccc;
  }

  .myStoreInfoSave:active {
    color: #FEFEFE;
    background: linear-gradient(4deg, #E7261B, #FD400B);
    box-shadow: 0px 4px 7px 0px rgba(233, 40, 26, 0.3);
  }
</style>
